<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>打地鼠案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      list-style: none;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }

    li {
      width: 400px;
      height: 300px;

      border: 1px solid #000;

      position: relative;

      overflow: hidden;
    }

    img {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }

    /* 泥土 */
    .dirt {
      z-index: 100;

      background-image: linear-gradient(to bottom,
          transparent 50%,
          #fff 50%,
          #fff 100%);
    }

    /* 地鼠 */
    .mole {
      transform: translate(-50%, 100%);

      transition: transform 1s;
    }

    .active {
      transform: translate(-50%, 0);
    }

    h1 {
      text-align: center;
    }

    button {
      width: 150px;
      height: 40px;
      border-radius: 20px;
      font-size: 18px;
      display: block;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <h1>打地鼠游戏得分 : <span>0</span></h1>
  <button>开始</button>
  <ul>
    <li>
      <img class="dirt" src="../images/dirt.svg" alt="" />
      <img class="mole" src="../images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="../images/dirt.svg" alt="" />
      <img class="mole" src="../images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="../images/dirt.svg" alt="" />
      <img class="mole" src="../images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="../images/dirt.svg" alt="" />
      <img class="mole" src="../images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="../images/dirt.svg" alt="" />
      <img class="mole" src="../images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="../images/dirt.svg" alt="" />
      <img class="mole" src="../images/mole.svg" alt="" />
    </li>
  </ul>
  <script>
    // 获取dom开始按钮标签
    const button = document.querySelector('button');
    // 获取mole标签
    const moles = document.querySelectorAll('.mole');
    // 获取ul标签，用来绑定事件委托事件，点击地鼠li标签得分
    const ul = document.querySelector('ul');
    // 获取span标签，用来记分
    const span = document.querySelector('span');
    // 倒计时初始值
    let s = 20;
    // 地鼠点击事件节流，创建flag默认值
    let flag = true;
    // 创建开始按钮点击事件
    button.addEventListener('click', function () {
      // 开启定时器，定时显示地鼠
      const timeId = setInterval(function () {
        //  开启器定时器新地鼠显示时，修改flag值为true，让新地鼠可以点击
        flag = true;
        const index = getRandom(0, moles.length - 1);
        moles[index].classList.add('active');
        button.innerText = `游戏倒计时${s}秒`;
        if (s <= 1) {
          button.innerText = '游戏结束';
        };
        // 延时清除类名 地鼠消失
        setTimeout(function () {
          moles[index].classList.remove('active');
        }, 1000);
        // 倒计时
        s--;
      }, 1000);

      // 延时器，关闭打地鼠游戏
      setTimeout(function () {
        clearInterval(timeId);
        button.disabled = false;
        button.innerText = '继续游戏';
        s = 20;
      }, 20000);
      button.disabled = true;
      span.innerText = 0;
    });

    // 给ul标签创建事件委托事件，点击li标签记分
    ul.addEventListener('click', function (e) {
      // 判断是否点中出现的地鼠li标签
      if (e.target.classList.contains('mole')) {
        if(flag){
        //  点击地鼠后，修改flag的值为false，防止二次点击
        flag = false;
        // 判断点击的li标签地鼠是否有active类，避免重复点击得分
        // if (e.target.classList.contains('active')) {
        //   span.innerText++;
        //   // 当点击到li地鼠标签后，删除li地鼠标签的active类
        //   e.target.classList.remove('active');
        // }
        span.innerHTML++;
        }
        
      };
    });
    // 随机数生成函数
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    };
  </script>
</body>

</html>